<template>
  <div class="huiyuan">
    <div class="bg"></div>
    <div class="container">
      <span class="title">会员资讯（仅对付费会员开放）</span>
      <span class="arrow">→</span>
      <div class="hr"></div>
      <div style="padding:0px 16px">
        <Card
          v-for="(v, k) of data"
          :key="k"
          :img="v.img"
          :title="v.title"
          :sub="v.sub"
        />
      </div>
      <div class="btn">登录会员，查看更多会员资讯</div>
    </div>
    <FooterSub />
  </div>
</template>

<script>
import Card from "../components/Card";
export default {
  components: { Card },
  data() {
    return {
      data: [],
    };
  },
  mounted() {
    this.axios.get("json/huiyuan.json").then((res) => {
      this.data = res.data.res;
      console.log(this.data);
    });
  },
};
</script>

<style lang="scss" scoped>
$fc: #ff6637;
.huiyuan {
  .container {
    margin-top: 80px;
    margin-bottom: 16px;
  }
  .bg {
    width: 100%;
    height: 450px;
    background: url("//13439588.s61i.faiusr.com/2/AD0I5KS0BhACGAAg1da9xwUovuu01AMwgA84wgM.jpg")
      no-repeat;
    background-position-x: center;
  }
  .title {
    margin-top: 16px;
    display: inline-block;
    padding: 12px 20px;
    color: $fc;
    font-size: 16px;
  }
  .arrow {
    color: #fff;
    background-color: $fc;
    padding: 3px;
    border-radius: 50%;
    float: right;
    margin-top: 28px;
  }
  .hr {
    height: 1px;
    background-color: #eaeaea;
  }
  .btn {
    width: 209px;
    height: 32px;
    line-height: 32px;
    background-color: $fc;
    font-size: 12px;
    text-align: center;
    color: #fff;
    padding: 10px 0;
    border-radius: 3px;
    margin: 32px auto;
    &:hover {
      background-color: hsla(7, 100%, 61%, 0.973);
    }
  }
}
</style>
